import type { FC} from 'react';
import { Group } from 'react-konva';
import CenterText from '../CenterText';

type RuleProps = {
  size: number;
  count: number;
  type?: 'vertical' | 'horizontal';
}

const fontSize = 14;

const Rule: FC<RuleProps> = (props) => {
  const { type, size, count } = props;
  const datas = Array.from({ length: count });

  const isVertical = type === 'vertical'

  const y = isVertical ? size : 0;
  const x = isVertical ? 0 : size;

  return (
    <Group x={x} y={y}>
      {datas.map((_, i) => {
        const text = `${i + 1}`;
        const x = isVertical ? 0 : i * size;
        const y = isVertical ? i * size : 0;

        return (
          <Group
            x={x}
            y={y}
            key={text}
            width={size}
            height={size}
          >
            <CenterText
              text={text}
              size={size}
              fill='#666'
              fontSize={fontSize}
            />
          </Group>
        );
      })}
    </Group>
  );
}


export default Rule;
